<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>

    <button id="reset">重新开始一局</button><br/>
    <span>输入要猜的数字</span>
    <input type="text"  id="guessNum">
    <button id="guess">猜</button><br/>
    <span>猜了多少次: </span><span id = "count">0</span><br/>
    <span>结果: </span><span id="result"></span>



    <script src="js\jquery-3.7.1.slim.min.js"></script>
    <script>
        let count = 0;
        let number = Math.floor(Math.random()*100) + 1;//生成随机数字
        console.log(number); // 调试用，显示生成的随机数

        $("#guess").click(function(){
            count++;
            $("#count").text(count);
            let GuessNum = $("#guessNum").val();
            if(GuessNum > number){
                $("#result").text("猜大了");
                $("#result").css("color", "red");
            }else if(GuessNum < number){
                $("#result").text("猜小了");
                $("#result").css("color", "red");
            }else{
                $("#result").text("猜对了");
                $("#result").css("color", "green");
            }
        });

        $("#reset").click(function(){
            number = Math.floor(Math.random()*100) + 1; // 去掉let，使用全局变量
            console.log(number); // 调试用，显示新生成的随机数
            count = 0;
            $("#result").text("");
            $("#count").text(count);
            $("#guessNum").val("");
        });
    </script>

</body>
</html>